<template>
  <div class="dls-recommend">
    <recommend-header :headerData="headerData"
                      type="dhs"></recommend-header>
  
    <div class="user-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
      >
        <div v-for="(item, index) in lists"
             :key="index"
             class="item clearfix">
          <div class="levelimg fl">
            <img v-if="item.headimgurl"
                  :src="item.headimgurl"
                  width="100%"
                  class="user"
                  alt />
            <img :src="defaultPhotoImg"
                v-else
                class="user"
                width="100%" />
          </div>
          <div class="levelinfo fl">
            <p>
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p v-if="item.mobile">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p>
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p v-if="item.rank_name">
              <span>级别：</span>
              <span>{{item.rank_name}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p>
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
          </div>
        </div>
      </van-list>
    </div>
    <no-data v-show="!lists.length && finished"
             :noData="noData"></no-data>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import recommendHeader from '@/views/user/components/recommendHeader'
import { getDhsRecommend, getDhsRecommendHeader } from '@/api/user/dhs/dhsApi'

import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/user/default_photo_img.jpg',
      headerData: {
        settle_commission: '',
        all_order_amount: '',
        dhs_num: '',
        order_total: '',
        type: 0
      },
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_distributor.png',
        text: '暂无推荐',
        marginTop: '5em'
      },
      lists: [],
      p: 1,
      error: false,
      loading: false,
      finished: false
    }
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  created(){
    this.getHeaderFn()
      this.onLoad()
  },
  methods: {
    getHeaderFn() {
      getDhsRecommendHeader({}).then(res => {
        if (res.status == 1) {
          this.headerData.settle_commission = res.data.settle_commission
          this.headerData.all_order_amount = res.data.all_order_amount
          this.headerData.dhs_num = res.data.dhs_num
          this.headerData.order_total = res.data.reward_total
        } else {
          this.$Error(res.msg)
        }
      }).catch(() => {
        this.finished = true
      })
    },
    // 加载更多
    onLoad() {
      const data = {
        p: this.p
      }
      getDhsRecommend(data).then(res => {
        if (res.status == 1) {
          if (data.p >= 2) {
            const list = this.lists.concat(res.data.user_list)
            this.lists = list
          } else {
            // this.headerData.settle_commission = res.data.settle_commission
            // this.headerData.all_order_amount = res.data.all_order_amount
            // this.headerData.dhs_num = res.data.dhs_num
            // this.headerData.order_total = res.data.reward_total
            this.lists = res.data.user_list
          }
          this.loading = false
          this.p++
          if (res.data.user_list.length < 10) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      }).catch(() => {
        this.finished = true
      })
    }
  },
  components: {
    recommendHeader,
    noData
  }
})
</script>

<style lang="scss">
@import "src/styles/user/cardList/index.scss";
@import "src/styles/variables";
@import "src/styles/mixin";
.levelinfo p {
  height: auto !important;
}
</style>
